<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
// 导入组件
import tabVue from "./components/tab.vue"
import TalentShowVue from "./components/talentShow.vue"
import EvaluateVue from "./components/evaluate.vue"
import DescriptionVue from "@/views/home/goodsInfo/components/description.vue";

const goodsDetail = ref(JSON.parse(sessionStorage.getItem("goods-info")) || {}) // 商品部分详细信息
const tabTitleList = ref([{
  title: "商品",
  offsetTop: 0,
  leftAttr: "goods"
}, {
  title: "评论",
  offsetTop: 0,
  leftAttr: "reply"
}, {
  title: "详情",
  offsetTop: 0,
  leftAttr: "detail"
}]) // 标题信息 "商品", "评论", "详情", "推荐"

const {proxy} = getCurrentInstance()

onMounted(() => {
  const evaluateTop = document.querySelector("#evaluate").offsetTop
  const descriptionTop = document.querySelector("#description").offsetTop
  tabTitleList.value[1].offsetTop = evaluateTop - 130
  tabTitleList.value[2].offsetTop = descriptionTop - 130
})


</script>

<template>
  <div class="bg-[#fafafa] pb-[20px] h-[100vh] overflow-auto" id="scroll-content">
    <!--tab栏-->
    <tabVue :tabTitleList="tabTitleList"></tabVue>
    <!--轮播图-->
    <div class="w-full h-[340px] bg-[#fff]">
      <van-swipe :autoplay="3000" lazy-render class="h-full">
        <van-swipe-item v-for="item in goodsDetail.swipeList" :key="item.id">
          <div class="w-full h-full flex justify-center items-center">
            <img :src="item.url" class=""/>
          </div>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator w-full h-[15%] absolute left-0 bottom-0">
            <div class="text-[#fff] bg-[#989898] flex w-[50px] ml-auto mr-[10px] rounded-[10px] overflow-hidden">
              <div class="bg-[#3d3838] px-[8px] rounded-[10px] overflow-hidden">{{ active + 1 }}</div>
              <div class="px-[8px]">{{ total }}</div>
            </div>
          </div>
        </template>
      </van-swipe>
    </div>
    <!--展示款式款式-->
    <div class="p-[10px] flex top-radius">
      <div class="flex">
        <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                   class="w-[40px] h-[50px] rounded-[8px] overflow-hidden">
          <template v-slot:loading>
            <van-loading type="spinner" size="20"/>
          </template>
        </van-image>
        <div class="flex flex-col justify-center ml-[10px] items-center text-[11px] text-[#919090]">
          <span>{{ goodsDetail.standardList.length }}款</span>
          <span>可选</span>
        </div>
      </div>
      <div class="flex-1 flex overflow-auto ml-[10px]">
        <div v-for="item in goodsDetail.standardList" class="ml-[10px] ">
          <van-image :src="item.imgUrl"
                     class="w-[40px] h-[50px] rounded-[8px] overflow-hidden">
            <template v-slot:loading>
              <van-loading type="spinner" size="20"/>
            </template>
          </van-image>
        </div>
      </div>
    </div>
    <!--信息展示栏-->
    <div class="px-[15px] py-[20px]">
      <!--价格展示-->
      <div class="flex justify-between">
        <div class="flex text-[red]">
          <div class="flex items-center">
            <div class="text-[16px]">￥</div>
            <div class="text-[20px] mr-[3px] font-bold">109</div>
            <div>起</div>
          </div>
          <div class="flex items-center text-[#fff] bg-[red] px-[10px] rounded-[8px] ml-[10px]">
            <div class="text-[16px]">劵后价￥</div>
            <div class="text-[20px] mr-[3px] font-bold">79</div>
            <div>起</div>
          </div>
        </div>
        <div class="text-[12px] flex items-center text-[#eb3f3f]">
          <div>劵·立减30元&nbsp; ></div>
        </div>
      </div>
      <!--标题展示-->
      <div class="mt-[10px] font-bold text-[18px]">
        {{ goodsDetail.title }}
      </div>
      <!--展示tag-->
      <div class="flex text-[12px] mt-[5px]">
        <div class="px-[5px] py-[2px] tag-border text-[#a5a517]">运费险</div>
        <div class="px-[5px] py-[2px] tag-border">已售 {{ goodsDetail.sales }}</div>
        <div class="px-[5px] py-[2px] tag-border">店铺好评率 99%</div>
        <div class="px-[5px] py-[2px] tag-border">70+ 达人推荐</div>
      </div>
    </div>
    <!--参数展示-->
    <div class="bg-[#fff] w-full">
      <van-cell-group>
        <van-cell title="单元格" is-link>
          <template #title>
            <div class="flex">
              <div>参数</div>
              <div class="ml-[30px] flex flex-1">
                <div class="flex flex-col text-[12px] flex-1">
                  <span>聚酯纤维</span>
                  <span class="text-[#ccc]">面料材质</span>
                </div>
                <div class="flex flex-col flex-1">
                  <span>微弹力</span>
                  <span class="text-[#ccc]">弹力</span>
                </div>
                <div class="flex flex-col flex-1">
                  <span>休闲裤</span>
                  <span class="text-[#ccc]">类型</span>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell title="单元格" is-link>
          <template #title>
            <div class="flex">
              <div>保障</div>
              <div class="ml-[30px] text-[12px]">运费险 · 七天无理由退货 · 极速退款</div>
            </div>
          </template>
        </van-cell>
        <van-cell title="单元格" is-link>
          <template #title>
            <div class="flex">
              <div>选择</div>
              <div class="ml-[30px] text-[12px]">生灰色 [加厚不加绒]</div>
            </div>
          </template>
        </van-cell>
        <van-cell title="单元格" class="relative">
          <template #title>
            <div class="flex">
              <div>物流</div>
              <div class="ml-[30px] text-[12px] flex-1">
                <div>发货 广东省广州市 免运费</div>
                <div class="flex my-[10px]">
                  <div>预计11月24送达</div>
                  <div class="position-icon">
                    <van-icon name="arrow" size="16" color="#969799"/>
                  </div>
                </div>
                <div class="flex">
                  <div>送至 浙江省金华市</div>
                  <div class="position-icon">
                    <van-icon name="arrow" size="16" color="#969799"/>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!--达人秀-->
    <TalentShowVue></TalentShowVue>
    <!--评价-->
    <EvaluateVue id="evaluate"></EvaluateVue>
    <!--描述-->
    <DescriptionVue id="description"></DescriptionVue>
  </div>
</template>

<style scoped lang="scss">
.scroll-content {
  scroll-behavior: smooth; /* 开启平滑滚动 */
}

.custom-indicator {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.top-radius {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tag-border {
  border: 1px solid #ccc;
}

.position-icon {
  position: absolute;
  right: 16px;
}
</style>
